<template>
  <div
    class="full-box new_dragger"
    :class="!isShowfull ? '' : 'has_full'"
    v-loading="pageLoading"
  >
    <el-container v-show="selectParentNode != null">
      <el-main style="overflow: hidden;">
        <BKAnalysisMaker
          :set-mode="editAble"
          :page-config="configs"
          :config-node="selectParentNode || {}"
          @invokeAMakerMethod="invokeAMakerMethod"
          ref="analysisMaker"
          :chart-menu-list="chartList"
          :is-basic-mode="true"
        />
      </el-main>
    </el-container>
    <div
      v-show="selectParentNode == null"
      class="full-box no_xz"
    >
      <div class="pic_bj" />
      <div class="font_f">
        请选择左侧页面
      </div>
    </div>
    <OpenPageConfig
      v-if="openPageConfigVisible"
      :visible="openPageConfigVisible"
      :current-id="currentPageId"
      :select-parent-node="selectParentNode"
      @close="openPageConfigVisible=false"
      @save="saveOpenPageConfig"
    />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import OpenPageConfig from './open-page-config.vue'
import BKAnalysisMaker from 'bk-analysis-maker'
// import BKAnalysisMaker from '../../../../../../../bk-analysis-maker/packages'
import { chartList } from '../configs/chart'
// import request from '@/utils/request'
// import { v4 as uuidv4 } from 'uuid'
import Vue from 'vue'
import store from '@/store'
Vue.use(BKAnalysisMaker, {
  getStore: (value) => {
    const props = value.split('.')
    let res = store
    for (let i = 0; i < props.length; i++) {
      if (props[i] === '$store') {
        continue
      }
      res = res[props[i]]
    }
    return res || ''
  }
})

const appId = 'YSJC'
const bzCode = 'YSJC'
export default {
  components: { OpenPageConfig },
  data () {
    return {
      isRefresh: false,
      pageLoading: false,
      selectParentNode: null,
      firstLoad: false,
      isShowfull: false,
      editAble: false,
      configs: null,
      openPageConfigVisible: false,
      currentPageId: '',
      tjbConfig: null,
      tjbConfigVisible: false,
      chartList: chartList
    }
  },
  computed: {
    ...mapState('user', ['userInfo']),
    rootId () {
      return this.selectParentNode ? this.selectParentNode.id : ''
    }
  },
  created () {
    this.$root.$on('loadPageConfigData', this.loadPageConfigData)
  },
  methods: {
    changeBz () {
      this.pageLoading = false
      this.selectParentNode = null
    },
    async loadPageConfigData (node) {
      try {
        this.selectParentNode = node
        if (node) {
          this.loadCfgData()
          this.editAble = node.PAGE_STATE !== '1'
        } else {
          this.configs = null
        }
        this.pageLoading = false
      } catch (error) {
        this.pageLoading = false
      }
    },
    invokeAMakerMethod (name) {
      const params = Array.from(arguments).slice(1)
      if (name === 'savePageConfig') {
        this.savePageConfig(...params)
      } else if (name === 'handleOpenPageConfig') {
        this.openPageConfig(...params)
      } else if (name === 'getOpenPageConfig') {
        this.getOpenPageConfig(...params)
      } else if (name === 'openTjbConfig') {
        this.openTjbConfig(...params)
      }
    },
    openPageConfig (config) {
      this.currentPageId = ''
      if (config && config.openPage) {
        this.currentPageId = config.openPage.id
      }
      this.openPageConfigVisible = true
    },
    saveOpenPageConfig (page) {
      this.$refs.analysisMaker.saveOpenPageConfig({ id: page.id, name: page.label })
      this.openPageConfigVisible = false
    },
    openTjbConfig (config) {
      this.tjbConfig = config
      this.tjbConfigVisible = true
    },
    saveTjbConfig (table, config) {
      this.$refs.analysisMaker.saveTjbConfig({ table, config })
      this.tjbConfigVisible = false
    },
    async loadCfgData () {
      const res = await this.$request.post('/ysjc/zhzs/getPageOption', {
        appId,
        bzCode,
        PAGEID: this.selectParentNode.id
      })
      const params = { YSQJC_ZHZS_PAGE: { PAGEID: this.selectParentNode.id } }
      if (res.page && res.page.PAGE_CFG) {
        const cfg = JSON.parse(res.page.PAGE_CFG)
        this.setCfg(cfg, res.charlist)
        this.configs = cfg
        params.YSQJC_ZHZS_PAGE.PAGE_CFG = res.page.PAGE_CFG
        params.YSQJC_ZHZS_CHARTS_COMPONENT = res.charlist
      } else {
        this.configs = null
      }
      this.beforeSaveParams = JSON.stringify(params)
    },
    async getOpenPageConfig (openPage, callback) {
      const res = await this.$request.post('/ysjc/zhzs/getPageOption', {
        appId,
        bzCode,
        PAGEID: openPage.id
      })
      let config = null
      if (res.page && res.page.PAGE_CFG) {
        const cfg = JSON.parse(res.page.PAGE_CFG)
        this.setCfg(cfg, res.charlist)
        config = cfg
      }
      callback(config)
    },
    setCfg (data, list) {
      const cfg = list.filter(c => c.COMPONENTID === data.id)
      if (cfg.length > 0) {
        data.tabList = cfg.map(item => { return JSON.parse(item.CHART_OPTION) })
        data.tabList.sort((a, b) => {
          return a.tabord - b.tabord
        })
      }
      if (data.layout) {
        for (let i = 0; i < data.layout.length; i++) {
          this.setCfg(data.layout[i], list)
        }
      }
      if (data.tabList && data.isTabLayout) {
        for (let i = 0; i < data.tabList.length; i++) {
          this.setCfg(data.tabList[i], list)
        }
      }
    },
    async savePageConfig (layoutConfigs, chartConfigs, isAuto, callback) {
      if (Object.keys(layoutConfigs).length === 0) {
        return isAuto ? undefined : this.$message.error('暂无需要保存的数据')
      }
      const cfg = []
      for (const key in chartConfigs) {
        chartConfigs[key].forEach((item, i) => {
          cfg.push({ COMPONENTID: key, PAGEID: this.selectParentNode.id, CHART_OPTION: JSON.stringify({ ...item, tabord: i }) })
        })
      }
      const params = { YSQJC_ZHZS_PAGE: { PAGEID: this.selectParentNode.id, PAGE_CFG: JSON.stringify(layoutConfigs) }, YSQJC_ZHZS_CHARTS_COMPONENT: cfg }
      console.log(params)
      if (!isAuto || this.beforeSaveParams !== JSON.stringify(params)) {
        await this.$request.post('/ysjc/zhzs/saveCharts', {
          appId,
          bzCode,
          metaSet: 'YSQJC_ZHZS_CHARTS_COMPONENT',
          methodParams: JSON.stringify(params)
        })
        this.beforeSaveParams = JSON.stringify(params)
        if (!isAuto) {
          this.$message.success('保存成功')
        }
        this.isRefresh = true
        if (callback) {
          callback()
        }
      }
    },
    toChangeFull () {
      this.isShowfull = !this.isShowfull
    }

  },
  beforeDestroy () {
    this.$root.$off('loadPageConfigData', this.loadPageConfigData)
  }
}
</script>
<style lang="scss" scoped>
.bk_full {
  background: #fff;
}

.no_xz {
  background: #f8f8f9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .pic_bj {
    width: 240px;
    height: 190px;
    background: url("../images/nojd.png") no-repeat center;
  }

  .font_f {
    color: #4c525a;
    font-size: 14px;
  }
}

::v-deep {
  .has_full {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .el-alert {
    padding-left: 8px;
    border-radius: 0;
  }

  .left-index {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .el-footer {
      height: 40px !important;
      padding-top: 3px;
      border-top: 1px solid #e8eaec;
      text-align: center;
    }

    .el-main {
      flex: 1;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}

::v-deep .analysis-maker-wrapper {
  .toolbar-pannel-wrapper {
    .group {
      .group-name {
        font-size: 13px;
        font-weight: bold;
      }
    }
  }

  .layout-wrapper.default-theme {
    background-color: #f1f3f6 !important;

    .vue-grid-item {
      border: 1px solid #f2f3f4;

      .preview-tab {
        .el-tabs__item.is-top {
          &.is-active {
            color: #010820;
            font-size: 18px;
            font-weight: 600;
            background: url("~@/assets/images/ysqgzt/line.jpg") no-repeat left bottom;
            background-size: 100% 3px;
          }
        }

        & .el-tabs__header .el-tabs__item {
          padding: 0 1px;
          height: 40px;
          line-height: 40px;
          margin-right: 16px;
          margin-left: 6px;
        }

        & .el-tabs__header .el-tabs__nav-wrap::after {
          background-color: #e4e7ed;
          height: 1px;
        }
      }

      .chart-title {
        .tab-btn-active {
          color: #010820 !important;
          font-size: 18px;
          padding-left: 0;
          font-weight: 600;
          height: 40px;
          background: url("~@/assets/images/ysqgzt/line.jpg") no-repeat right bottom;
          background-size: auto 3px;
        }
      }

      .explain-cotent {
        position: absolute;
        z-index: 99;
        width: 100%;
        left: 0 !important;
        right: 0 !important;
        top: 6px !important;

        .top-titel {
          height: 35px;
          position: relative;
          display: flex;
          border-bottom: 1px solid #f2f3f4;
          justify-content: space-between;
          align-items: center;

          > span.big-text {
            color: #010820;
            font-size: 18px;
            font-weight: 600;
            line-height: 40px;
            position: relative;
            background: url("~@/assets/images/ysqgzt/line.jpg") no-repeat right bottom;
            background-size: auto 3px;
            margin-left: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          > span.small-text {
            font-size: 14px;
            font-weight: 400;
            color: #5f6064;
          }
        }
      }
    }
  }
}
</style>
